<template>
  <div class="home_div">
    <div :id="mapId" style="width: 100%; height: 100%;">
    </div>
    <div id="panel"></div>
</div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'HotelSystemMap',
  props: {
    // 渲染的地图组件
    mapId: {
      type: String,
      default: 'map'
    },

    zoom: {
      type: Number,
      default: 16
    },
    // 传进来的关键词
    keyword: {
      type: String, // 定义一个名为 keyword 的 props 属性，类型为 String
      default: '' // 默认值为空字符串
    }

  },
  data () {
    return {
      map: null,
      placeSearch: null // 关键词搜索的对象

    }
  },

  mounted () {
    // 加载高德地图 JavaScript API
    AMapLoader.load({
      key: '09a3b5266284dd13cda2392545575657',
      version: '2.0',
      plugins: ['AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.ZoomControl', 'AMap.Driving', 'AMap.Geolocation']
    }).then((AMap) => {
      // 创建地图对象
      this.map = new AMap.Map(this.mapId, {
        zoom: this.zoom,
        center: this.center,
        viewMode: '3D'
      })

      if (this.keyword) {
        console.log('关键词')
        // 关键词搜索
        const placeSearch = new AMap.PlaceSearch({
          pageSize: 3, // 每页显示的结果数量，默认为 10
          pageIndex: 1, // 当前页码，默认为 1
          city: '全国', // 搜索的城市，默认为全国
          map: this.map, // 将搜索结果显示在当前地图上
          panel: 'panel'
        })
        // 根据关键词搜索地点
        placeSearch.search(this.keyword)
        // 监听搜索服务的搜索完成事件
        AMap.event.addListener(placeSearch, 'complete', data => {
        // 遍历搜索结果，将每个地点显示在地图上
          data.poiList.pois.forEach(poi => {
          // 创建标记点
            const marker = new AMap.Marker({
              position: poi.location, // 标记点的位置
              title: poi.name // 标记点的标题
            })

            // 将标记点添加到地图上
            this.map.add(marker)
          })
        })
        // 监听搜索服务的搜索失败事件
        AMap.event.addListener(placeSearch, 'error', err => {
          console.error('搜索失败：', err)
        })
      }
      console.log(this.enableGeolocation)
      // 定位用户所在的位置
    })
  },
  beforeDestroy () {
    // 销毁地图对象
    this.map.destroy()
  }
}
</script>

<style lang="less" scoped>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}
#panel {
position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
   border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
  overflow: hidden;
}

</style>
